<template>
  <div class="target">
    <div style="float:left; width: 100%;">
      <img src="../assets/images/sda.png" alt="" style="float:left;width:20px;margin-top: 16px">
      <p style="margin-left: 30px;">指标分析</p>
    </div>
    <div class="char">
      <div style="float:left; margin-left: 35%;margin-top: 10px">
        <i>男: <i v-html="boy"></i> </i>
        <i style="margin-left: 20px">女:<i v-html="girl">1</i></i>
      </div>
      <e-charts autoresize :option="optionx" style="height: 250px;"></e-charts>
    </div>
    <div class="char">
      <e-charts autoresize :option="occupation" style="height: 250px;"></e-charts>
    </div>
    <div class="char">
      <e-charts autoresize :option="options" style="height: 250px;"></e-charts>
    </div>
    <div class="char" style="margin-top: 30px">
      <e-charts autoresize :option="optionj" style="height: 250px;"></e-charts>
    </div>
    <div class="char" style="width: 63.5%;;margin-top: 30px;margin-bottom: 20px">
      <e-charts autoresize :option="optionz" style="height: 290px;"></e-charts>
    </div>
  </div>
</template>

<script>
  import {homes} from "../api/home/home";

  export default {
    name: "target",
    data() {
      return {
        option:  {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 580, name: 'Email' },
                { value: 300, name: 'Video Ads' }
              ]
            }
          ]
        },
        occupation:{
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 580, name: 'Email' },
                { value: 300, name: 'Video Ads' }
              ]
            }
          ]
        },
        boy:'',
        girl:'',
        optionx:{
          xAxis: {
            type: 'category',
            data: ['男', '女',]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'line'
            }
          ]
        },
        options : {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
              ]
            }
          ]
        },
        optionj:{
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '教育程度',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: []
            }
          ]
        },
        optionz:{
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              data: [],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                width:'20px',
                color: 'rgba(180, 180, 180, 0.1)'
              }
            }]
        }
      }
    },
    created(){
      this.homes()
    },
    methods:{
      homes(){
        homes().then(res=>{
          //性别分布
          this.optionx.series[0].data.push(res.data.sexStatics.boy,res.data.sexStatics.girl)
          this.boy=res.data.sexStatics.boy
          this.girl=res.data.sexStatics.girl
          // console.log(this.optionx.series[0].data)
          //地区分布
          for (let i=0;i<res.data.areaStatics.length;i++){
            this.optionz.xAxis.data.push(res.data.areaStatics[i].county_name)
            this.optionz.series[0].data.push(res.data.areaStatics[i].cnt)
          }
          //教育程度
          for (let i=0;i<res.data.teacherStatics.length;i++){
            this.optionj.series[0].data = res.data.teacherStatics.map(item => ({name: item.teacherLevel, value: item.cnt}));
          }
        //  职业分布occupation
        //   for (let i=0;i<res.data.职业分布occupation.length;i++){
        //     this.optionj.series[0].data = res.data.teacherStatics.map(item => ({name: item.teacherLevel, value: item.cnt}));
        //   }
        }).catch(err=>{
          console.log(err)
        })
      }
    },
  }
</script>

<style scoped>
  .char{
    width: 31%;
    height: 250px;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px 0px rgba(51,51,51,0.08);
    border-radius: 8px;
    float: left;
    margin-right: 20px;
  }
</style>
